<template>
    <h2>配送员管理</h2>
    <el-card shadow="never">
        <div style="margin-bottom: 14px;">
            <el-button type="primary" @click="dialogToChild">添加配送员</el-button>
        </div>
        <el-table 
        
        :data="tableData" style="width: 100%" :header-cell-style="{backgroundColor:'#e5eeff'}">
            <el-table-column label="ID" prop="_id" width="250" style="background-color: antiquewhite;"/>
            <el-table-column label="头像" prop="avatar">
                <template #default="score">
                    <div class="block">
                        <el-avatar :size="50" :src="score.row.avatar" shape="square" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="名称" prop="name" />
            <el-table-column label="手机号码" prop="phone" />
            <el-table-column label="是否显示" prop="1">
               <template #default="{row}">
                <el-switch v-model="row.state" inline-prompt  active-text="是" :active-value="1" :inactive-value="0"
                inactive-text="否"/>
               </template>
            </el-table-column>
            <el-table-column label="添加时间" prop="666" />
            <el-table-column align="right" label="操作">
                <template #default="scope">
                    <el-button text size="small" @click="handleEdit( scope.row)" type="primary">
                        编辑
                    </el-button>
                    <el-button text size="small" type="primary" @click="SureDeleteBefore(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page-container">
            <el-pagination :page-sizes="[5, 10, 15, 20]" v-model:current-page="pageData.currentPage"
                v-model:page-size="pageData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                :background="true" />
        </div>
    </el-card>
    <!-- 弹出框显示区 -->
    <!-- 通过v-model传递父子的显示和隐藏 -->
    <CourierSettingDialog v-model="dialogVisible" :ruleForm="ruleForm" @getcourierSome="getcourierSome"/>
</template>



<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import api from '../../../api';
import { ElMessage, ElMessageBox } from 'element-plus'
interface User {
    _id: string
    name: string
    phone: string
    avatar: string
    state: string
    time: string
}
let tableData = ref([])

// 配送员的总数
const total = ref(0)
// 点击编辑配送员
const handleEdit = (row: User) => {
    dialogVisible.value = true
    ruleForm.value = {...row}
}
// 删除前确认删除
const SureDeleteBefore=(row: User)=>{
    ElMessageBox.confirm(
    '您确认删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(()=>{
    handleDelete(row)
    ElMessage.success("配送员删除成功")
  })
}
// 删除配送员
const handleDelete = async (row:any) => {
    // console.log( row,3333)
    const res = await api.courierManage.remove({ _id: row._id })
    if (res.code == 200) {
        console.log(res);
        getcourierSome()
    }
}
// 打开弹窗的数据开关
let dialogVisible = ref(false)

// 让子组件打开弹窗
const dialogToChild = () => {
    dialogVisible.value = true
}
// 表单双邦的数据
let ruleForm = ref({})
//输入框清空
watch(dialogVisible, () => {
    if (dialogVisible.value == false) {
        // console.log("gggg");
        ruleForm.value ={}
    }
},
)
// 分页数据
const pageData = ref({
    currentPage: 1,
    pageSize: 5
})
// 配送员分页条变化
watch(pageData.value, () => {
    getcourierSome(), {
        deep: true
    }
})

// 获取配送员
// console.log(api);
async function getcourierSome() {
    let res = await api.courierManage.search({})
    if (res.code == 200) {
        // console.log(res);
        total.value = res.data.length
        // let {currentPage,pageSize}=pageData.value
        tableData.value = res.data.slice((pageData.value.currentPage - 1) * pageData.value.pageSize, pageData.value.currentPage * pageData.value.pageSize)
    }
}

onMounted(() => {
    getcourierSome()
})


</script>

<style scoped>
.page-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

</style>